import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:fluttermarketingplus/utils/auto_layout.dart';
import 'package:oktoast/oktoast.dart';

//昨日业绩及步行情况
class AchievementWidget extends StatefulWidget {
  @override
  _AchievementWidgetState createState() => _AchievementWidgetState();
}

class _AchievementWidgetState extends State<AchievementWidget> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          alignment: Alignment.centerLeft,
          padding: EdgeInsets.only(left: ScreenUtil().setWidth(20)),
          height: AutoLayout.instance.pxToDp(80),
          color: Colors.deepOrangeAccent,
          child: Text(
            '昨日业绩及步行情况',
            style: TextStyle(
                color: Colors.black, fontSize: ScreenUtil().setSp(35)),
          ),
        ),
        Container(
          child: Column(
            children: <Widget>[
              _achievementWidget(
                  title: '洗涤', count: '5', dolor: '35.0', getDolor: '35.0'),
              _achievementWidget(
                  title: '洗涤', count: '5', dolor: '35.0', getDolor: '35.0'),
              _rankWidget(),
              _orderCommentWidget('订单评价', '客户XXX评价，小哥态度很好，我好喜欢', () {
                showToast('更多功能正在开发... ');
              }),
              _orderCommentWidget('本店好评率排名第1', '', () {
                showToast('更多功能正在开发... ');
              }),
            ],
          ),
        ),
      ],
    );
  }

  //订单评价
  Widget _orderCommentWidget(String title, String comment, VoidCallback onTap) {
    List<TextSpan> spans = [];
    TextStyle keywordStyle =
        TextStyle(fontSize: ScreenUtil().setSp(30), color: Colors.orange);
    TextStyle normalStyle =
        TextStyle(fontSize: ScreenUtil().setSp(30), color: Colors.black);
    if (title.contains('本店好评率排名第')) {
      List<String> str = title.split('第');
      spans.add(TextSpan(text: '${str[0]}第', style: normalStyle));
      spans.add(TextSpan(text: str[1], style: keywordStyle));
    } else {
      spans.add(TextSpan(text: comment, style: normalStyle));
    }
    return Container(
      margin: EdgeInsets.only(
          top: AutoLayout.instance.pxToDp(20),
          bottom: AutoLayout.instance.pxToDp(20)),
      padding: EdgeInsets.only(
          right: AutoLayout.instance.pxToDp(20),
          left: AutoLayout.instance.pxToDp(20)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          //富文本的展示
          Container(child: RichText(text: TextSpan(children: spans))),
          Expanded(
              child: Container(
            child: Text(
              comment,
              style: TextStyle(
                  color: Colors.black, fontSize: ScreenUtil().setSp(35)),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          )),
          InkWell(
            splashColor: Colors.transparent,
            highlightColor: Colors.transparent,
            onTap: onTap,
            child: Container(
              child: Text(
                '更多 >>',
                style: TextStyle(
                    color: Colors.black, fontSize: ScreenUtil().setSp(35)),
              ),
            ),
          ),
        ],
      ),
    );
  }

  //个人排行
  Widget _rankWidget() {
    return Container(
      color: Colors.lightGreen,
      child: Row(
        children: <Widget>[
          _singlePeopleWidget('images/head1.jpeg', 'Lucy', '12000步 第3名'),
          _singlePeopleWidget('images/head2.jpg', 'IiIi', '6000步 第10名'),
          _singlePeopleWidget('images/head3.jpeg', 'David', '3000步 第50名'),
        ],
      ),
    );
  }

  //单个人展示组件
  Widget _singlePeopleWidget(String headImage, String name, String desc) {
    return Expanded(
        child: Container(
      margin: EdgeInsets.only(
          top: AutoLayout.instance.pxToDp(20),
          bottom: AutoLayout.instance.pxToDp(20)),
      child: Column(
        children: <Widget>[
          ClipOval(
            child: Image.asset(
              headImage,
              width: ScreenUtil().setWidth(100),
              height: ScreenUtil().setHeight(100),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 10),
            child: Text(
              name,
              style: TextStyle(
                  color: Colors.black, fontSize: ScreenUtil().setSp(36)),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 10),
            child: Text(
              desc,
              style: TextStyle(
                  color: Colors.black54, fontSize: ScreenUtil().setSp(25)),
            ),
          )
        ],
      ),
    ));
  }

  //业绩组件
  Widget _achievementWidget(
      {String title, String count, String dolor, String getDolor}) {
    return Container(
      height: AutoLayout.instance.pxToDp(80),
      decoration:
          BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey))),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Text(
            title,
            style: TextStyle(
                color: Colors.black, fontSize: ScreenUtil().setSp(35)),
          ),
          Text(
            '${count}单',
            style: TextStyle(
                color: Colors.black, fontSize: ScreenUtil().setSp(35)),
          ),
          Container(
            child: Row(
              children: <Widget>[
                Text(
                  '实收金额:',
                  style: TextStyle(
                      color: Colors.black, fontSize: ScreenUtil().setSp(35)),
                ),
                Text(
                  '¥${dolor}',
                  style: TextStyle(
                      color: Colors.blue, fontSize: ScreenUtil().setSp(35)),
                ),
              ],
            ),
          ),
          Container(
            child: Row(
              children: <Widget>[
                Text(
                  '提成:',
                  style: TextStyle(
                      color: Colors.black, fontSize: ScreenUtil().setSp(35)),
                ),
                Text(
                  '¥${dolor}',
                  style: TextStyle(
                      color: Colors.blue, fontSize: ScreenUtil().setSp(35)),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
